<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-button
        style="display: flex; justify-content: center;background-color: #9c446e;color: #fff;"
        size="default"
        @click="change_staticshow"
        >返回</el-button
      >
      </el-col>
    </el-row>
    
    <!-- 名称 -->
    <el-row class="rowel">
      <el-col :span="2">标题:</el-col>
      <el-col :span="16">
        <el-input placeholder="输入标题" v-model="row_s.title"></el-input>
      </el-col>
    </el-row>
    <!-- //描述 -->
    <el-row class="rowel">
     <el-col :span="2">封面:</el-col>

      <el-col :span="8">
        <el-upload
          class="upload-demo"
          drag
          list-type="picture"
          :limit="1"
          action="https://zyc618.mynatapp.cc/api/files/uploads"
          :on-success="handleAvatarSuccess_img"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将封面图片拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-col>
      <el-col :span="8"
        ><img :src="baseurl + row_s.imgrul" style="max-height: 300px;" alt="" srcset=""
      /></el-col>
    </el-row>
    <el-row class="rowel">
      <el-col :span="2">视频:</el-col>
      <el-col :span="8">
        <el-upload
          class="upload-demo"
          drag
          list-type="picture"
          action="https://zyc618.mynatapp.cc/api/files/uploads"
          :limit="1"
          :on-success="handleAvatarSuccess_video"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-col>
      <el-col :span="8">
        <video
          style="width: 100%;height: 300px;"
          :src="baseurl + row_s.videourl"
          controls
        ></video>
      </el-col>
    </el-row>

    <el-row class="rowel">
      <el-button
        style="display: flex; justify-content: center"
        type="success"
        size="default"
        @click="savebutton"
        >保存</el-button
      >
      
    </el-row>
  </div>
</template>
<script>

export default {
  props:{
    row:{
      default:{}
    }
  },
  data() {
    return {
      row_s:{},
      baseurl: "https://zyc618.mynatapp.cc",
    };
  },
  methods: {
    handleAvatarSuccess_video(res, file){
      if(res.code == 200){
        this.row_s.videourl =  res.data.url;
      }
    },
    handleAvatarSuccess_img(res, file){
      if(res.code == 200){
        this.row_s.imgrul =  res.data.url;
      }
    },
    async savebutton(){
      let result = await this.$API.text.savebutton(this.row_s);
      
      if (result.code == 200) {
        //获取
        this.$message({message:"保存成功",type:"success"});
        this.$bus.$emit("change_staticshow",true);
        
        this.$bus.$emit("change_row",result.data.keyword)
      }
    },
    change_staticshow(){
      this.$bus.$emit("change_staticshow",true)
    }
  },
  computed: {},
  mounted() {
    this.row_s = this.row
  },
};
</script>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.rowel{
  margin: 10px 0;
  color: #9c446e;
  font-weight: 600;
  font-size: 22px;
}
</style>
